import React, {useCallback, useEffect} from 'react'
import { Link } from 'react-router-dom'
import dayjs from "dayjs"
import axios from "axios";

const PostItem = ({postID, wages, title, authorID, views, applies, createdAt}) => {
    const postTitle = title.length > 23 ? title.substr(0, 20) + '...' : title;
    const wagesFree  = wages?wages:'免费'
    const create = dayjs(createdAt).format('YYYY-MM-DD');

    const fetchData = useCallback(() => {
        try {
            console.log('fetchData');
            axios.get(`${process.env.REACT_APP_BASE_URL}/posts/view/${postID}`);
        } catch (err) {
            console.log(err);
        }
    }, [postID]);

  return (
      <Link to={`/posts/${postID}`} key={postID}>
      <div onClick={fetchData} className="list-items_1 flex-col post-details">
          <div className="text-wrapper_1">
              <span className="text_4">{wagesFree}</span>
              <span className="text_5">/小时</span>
          </div>
          <span className="text_6">{postTitle}</span>
          <div className="box_1 flex-row">
              <span className="text_7">发布时间：{create}</span>
              <div className="image-text_3 flex-row justify-between">
                  <img
                      className="icon_3"
                      src={"https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGc06cac6a35b7a66c8cf48b608d82ed2e.png"}
                  />
                  <span className="text-group_1">{views} 次</span>
              </div>
              <div className="image-text_4 flex-row justify-between">
                  <img
                      className="icon_4"
                      src={"https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNG0ef7bb307bf3118b53374452b0b0c6ef.png"}
                  />
                  <span className="text-group_2">{applies} 人</span>
              </div>
          </div>
      </div>
      </Link>
  )
}

export default PostItem
